<template>
  <div class="train">
    <div class="header">
      <label for="name1"
        >{{ $store.state.pxswitch ? "培训" : "考试" }}序号 :
      </label>
      <input
        id="name1"
        v-model="examinationId"
        type="btn"
        placeholder="序号/编号"
      />

      <!-- <el-select
        v-model="testSubject"
        placeholder="请选择"
      >
        <el-option
          label="低压配电装置"
          value="0"
        ></el-option>
        <el-option
          label="带电调换电实训装置"
          value="1"
        ></el-option>
      </el-select> -->
      <label for="name">
        {{ $store.state.pxswitch ? "学生" : "考生" }}姓名:
      </label>
      <input
        id="name"
        v-model="studentName"
        type="btn"
        placeholder="请输入名称"
      />

      <el-button type="primary" @click="query()"> 查询 </el-button>
      <el-button @click="reset"> 重置 </el-button>
    </div>
    <el-table
      id="out-table"
      ref="table"
      :data="gradeTableData"
      :cell-style="{ padding: 3 + 'px' }"
      :row-style="{ height: 0 + 'px' }"
      :header-cell-style="tableHeaderColor"
      :height="tabheight"
    >
      <el-table-column
        prop="studentId"
        label="学号"
        width="70"
      ></el-table-column>
      <el-table-column prop="studentName" label="姓名" width="80">
      </el-table-column>

      <el-table-column prop="examinationName" label="考试名称" min-width="120">
      </el-table-column>
      <el-table-column prop="equipmentType" label="设备类型" min-width="150">
        <template slot-scope="scope">
          {{
            scope.row.equipmentType == 1
              ? "低压配电综合装置"
              : "带电调换电实训装置"
          }}
        </template>
      </el-table-column>
      <el-table-column prop="equipmentName" label="考位" width="130">
      </el-table-column>

      <!-- <el-table-column
            prop="endTime"
            label="考试时间"
            width="210"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.startTime != null">
                {{ scope.row.startTime }}--{{
                  scope.row.endTime
                    .replace(" ", ":")
                    .replace(/\:/g, "-")
                    .split("-")[3]
                }}:{{
                  scope.row.endTime
                    .replace(" ", ":")
                    .replace(/\:/g, "-")
                    .split("-")[4]
                }}</span>
              <span v-else>未统计</span>
            </template>
          </el-table-column> -->
      <el-table-column prop="helmetDetection" label="安全帽" min-width="65">
        <span
          slot-scope="scope"
          :style="{ color: scope.row.helmetDetection == 0 ? '' : 'red' }"
        >
          {{ scope.row.helmetDetection }}
        </span>
      </el-table-column>
      <el-table-column prop="toolingDetection" label="工装" min-width="55">
        <span
          slot-scope="scope"
          :style="{ color: scope.row.toolingDetection == 0 ? '' : 'red' }"
        >
          {{ scope.row.toolingDetection }}
        </span>
      </el-table-column>
      <el-table-column prop="outDetection" label="越界" min-width="55">
        <span
          slot-scope="scope"
          :style="{ color: scope.row.outDetection == 0 ? '' : 'red' }"
        >
          {{ scope.row.outDetection }}
        </span>
      </el-table-column>
      <el-table-column prop="peopleDetection" label="人员聚集" min-width="80">
        <span
          slot-scope="scope"
          :style="{ color: scope.row.peopleDetection == 0 ? '' : 'red' }"
        >
          {{ scope.row.peopleDetection }}
        </span>
      </el-table-column>
      <el-table-column prop="articleDetection" label="物品遗漏" min-width="80">
        <span
          slot-scope="scope"
          :style="{ color: scope.row.articleDetection == 0 ? '' : 'red' }"
        >
          {{ scope.row.articleDetection }}
        </span>
      </el-table-column>

      <!-- <el-table-column
        prop="timeOutDetection"
        label="超时"
        min-width="55"
      >
        <span
          slot-scope="scope"
          :style="{ color: scope.row.timeOutDetection == 0 ? '' : 'red' }"
        >
          {{ scope.row.timeOutDetection }}
        </span>
      </el-table-column>
      <el-table-column
        prop="timeOutDetection"
        label="迟到"
        min-width="55"
      >
        <span
          slot-scope="scope"
          :style="{ color: scope.row.timeOutDetection == 0 ? '' : 'red' }"
        >
          {{ scope.row.timeOutDetection }}
        </span>
      </el-table-column> -->
      <el-table-column prop="examScore" label="分数" min-width="55">
        <template slot-scope="scope">
          {{ scope.row.examScore ? scope.row.examScore : 0 }}
        </template>
      </el-table-column>
      <!-- <el-table-column
        prop="postStatus"
        label="发布状态"
      >
        <span
          slot-scope="scope"
          :style="{ color: scope.row.postStatus == 1 ? '' : 'red' }"
        >
          {{ scope.row.postStatus == 0 ? "未发布" : "已发布" }}
        </span>
      </el-table-column> -->
      <el-table-column fixed="right" label="操作" width="340">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            @click="
              compileClick(1, scope.row.examinationId, scope.row.studentId)
            "
          >
            <i class="el-icon-zoom-in"></i> 查看图片
          </el-button>
          <el-button
            type="primary"
            size="small"
            :disabled="scope.row.postStatus == 1"
            @click="changeGrade(scope.row, 0)"
          >
            <i class="el-icon-edit"></i> 制作报告
          </el-button>
          <el-button
            type="primary"
            size="small"
            @click="changeGrade(scope.row, 1)"
          >
            <i class="el-icon-view"></i> 查看报告
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="fractionPage"
      :page-sizes="[fractionlimit, 20, 30, 50, 100]"
      :page-size="fractionlimit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="fractiontotal"
      @size-change="fractionChange"
      @current-change="fractionCurrentChange"
    >
    </el-pagination>

    <el-dialog
      v-dialogDrag
      class="pxbg"
      title="培训报告"
      :visible.sync="reportVisible"
      width="50%"
      center
      top="5vh"
    >
      <report :reprotval="reprotVal" :reportdata="reportData"></report>
    </el-dialog>

    <!-- 图片展示 -->
    <el-dialog
      v-dialogDrag
      title="抓拍图片(点击图片查看大图)"
      :visible.sync="kimgVisible"
      width="80%"
      top="10vh"
      center
    >
      <dd
        v-for="ite in imgtype"
        :key="ite.id"
        :class="{ styleName: ite.id == imgTypeId }"
        @click="compileClick(ite.id, examid, stuid)"
      >
        {{ ite.title + "图片" }}
      </dd>

      <ul class="imglist">
        <li
          v-for="(item, index) in imgdata"
          v-show="imgdata.length > 0"
          :key="index"
          @click="popover($event)"
        >
          <el-image
            style="width: 100%; max-height: 10vh"
            :src="item"
            fit="contain"
            :preview-src-list="imgdata"
            @error="imgExists($event)"
          >
          </el-image>
        </li>

        <h1 v-show="imgdata.length <= 0">未找到违规图片!</h1>
      </ul>
      <span slot="footer" class="dialog-footer">
        <el-button @click="kimgVisible = false">取 消</el-button>
        <el-button type="primary" @click="kimgVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { queryFraction, queryImage } from "@/api";
import report from "@/components/Report.vue";
export default {
  components: { report },
  data() {
    return {
      reportVisible: false,
      postStatus: "",
      testSubject: "",
      startTime: "",
      endTime: "",
      fractionPage: 1,
      studentName: "",
      fractiontotal: 1,
      fractionlimit: 1, //学生信息条数
      reprotVal: 1, // 保存 && 生产pdf
      examinationId: "",
      gradeTableData: [],
      reportData: [],
      imgdata: [],
      tabheight: 700,
      cltime: null,
      kimgVisible: false,
      imgtype: [
        { id: 1, title: "越界" },
        { id: 2, title: "人员聚集" },
        { id: 3, title: "安全帽" },
        { id: 4, title: "拍照" },
      ],
      imgTypeId: 1,
    };
  },
  watch: {
    studentName: {
      handler() {
        clearTimeout(this.cltime);
        this.cltime = setTimeout(() => {
          this.query();
        }, 800);
      },
      deep: true,
    },
    examinationId: {
      handler() {
        clearTimeout(this.cltime);
        this.cltime = setTimeout(() => {
          this.query();
        }, 1200);
      },
      deep: true,
    },
  },
  mounted() {
    setTimeout(() => {
      this.tabheight =
        window.innerHeight -
        this.$refs.table.$el.getBoundingClientRect().top -
        55;
      this.fractionlimit = Math.floor(this.tabheight / 40);
      this.query();
    }, 10);
  },

  methods: {
    // 重置表单
    reset: function () {
      this.testName = "";
      this.postStatus = "";
      this.testSubject = "";
      this.startTime = "";
      this.endTime = "";
    },
    tableHeaderColor({ rowIndex }) {
      if (rowIndex === 0) {
        return "background-color: #009A9A;color: #fff;font-weight: 500;'font-size':'14px';height:20px;padding:8px 0";
      }
    },
    // 根据考试查询学生信息
    query(
      page = this.fractionPage,
      limit = this.fractionlimit,
      studentName = this.studentName,
      usersId = localStorage.getItem("usersId"),
      examinationId = this.examinationId,
      examType = this.$store.state.pxswitch ? 0 : 1
    ) {
      queryFraction({
        page,
        limit,
        usersId,
        studentName,
        examinationId,
        examType,
      }).then((res) => {
        this.isFraction = true;
        this.gradeTableData = res.data;
        this.fractiontotal = res.count;
      });
    },
    queTest() {
      this.query();
    },
    fractionChange(val) {
      this.fractionlimit = val;
      this.query();
    },
    fractionCurrentChange(val) {
      this.fractionPage = val;
      this.query();
    },

    // 查看违规图片

    compileClick(imageType = 1, examinationId, studentId) {
      this.examid = examinationId;
      this.stuid = studentId;
      this.imgTypeId = imageType;
      queryImage({ examinationId, studentId, imageType })
        .then((res) => {
          if (res.result_code == 200) {
            this.imgdata = [];
            res.data.forEach((item) => {
              this.imgdata.push("platform/management/detection/" + item);
            });
            this.kimgVisible = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 制作报告
    changeGrade(data, val) {
      console.log(data);
      this.reportData = data;
      this.reprotVal = val;
      this.reportVisible = true;
    },
    // 图片加载失败
    imgExists(e) {
      //默认图片
      var imgUrl = require("../../assets/jzsb.png");
      var img = e.srcElement;
      img.src = imgUrl;
      //判断图片大小是否大于0 或者 图片高度与宽度都大于0
      if (img.filesize > 0 || (img.width > 0 && img.height > 0)) {
        e.src = imgUrl;
      } else {
        //默认图片也不存在的时候
      }
    },
    popover(e) {
      this.elImgUrl = e.target.currentSrc;
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  padding: 5px 10px;
  background: rgba(0, 128, 128, 1);
  color: white;
  font-size: 14px;
  text-align: left;
  label {
    display: inline-block;
    text-align: left;
    padding-right: 5px;
  }
  input {
    padding: 0 10px;
    color: #666;
    line-height: 25px;
    border-radius: 5px;
    margin: 5px 10px 5px 0;
    width: 80px;
  }
  .el-table__body tr.current-row > td {
    background-color: #010102 !important;
    color: #fff;
  }
  .el-button {
    margin-left: 20px;
  }
  .el-select {
    width: 140px;
    line-height: 5px;
    height: 5px;
  }

  .el-date-editor {
    margin-right: 5px;
    width: 140px;
  }

  .el-input__icon {
    line-height: 25px;
  }
}

.el-pagination {
  margin-bottom: 65px;
}
.el-dialog__body {
  dd {
    float: left;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 5px;
    margin: 0 15px 15px 0;
    color: white;
    background: #006065;
  }
  .styleName {
    background: #1db3b3;
  }
  h1 {
    text-align: center;
    padding: 35px;
    font-size: 28px;
    color: #f1b549;
  }
  .imglist {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;

    --wid: 13.42%;
    li {
      box-sizing: border-box;
      width: var(--wid);
      min-width: var(--wid);
      max-width: var(--wid);
      margin-right: 1%;
      margin-bottom: 20px;
      &:nth-child(7n) {
        margin-right: 0;
      }
    }
  }
}
</style>
